import 'package:flutter/material.dart';

import '../common/vertical_dotted_line.dart';
import '../data/mock_data.dart';

class BlindBoxDetails extends StatelessWidget {
  const BlindBoxDetails({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取顶部状态栏高度
    double statusBarHeight = MediaQuery.of(context).padding.top;

    // 顶部按钮
    Widget buildTopActions() {
      return Positioned(
        top: statusBarHeight + 18,
        left: 16,
        right: 16,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SizedBox(
              width: 28,
              height: 28,
              child: IconButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                alignment: Alignment.center,
                style: ButtonStyle(
                  padding: WidgetStateProperty.all(EdgeInsets.all(0)),
                  backgroundColor: WidgetStateProperty.all(Colors.white.withOpacity(0.75)),
                  shape: WidgetStateProperty.all(RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(6),
                  )),
                ),
                icon: Icon(Icons.arrow_back_ios_new, color: Colors.black, size: 18),
              ),
            ),
            SizedBox(
              width: 28,
              height: 28,
              child: IconButton(
                onPressed: () {},
                alignment: Alignment.center,
                style: ButtonStyle(
                  padding: WidgetStateProperty.all(EdgeInsets.all(0)),
                  backgroundColor: WidgetStateProperty.all(Colors.white.withOpacity(0.75)),
                  shape: WidgetStateProperty.all(RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(6),
                  )),
                ),
                icon: Icon(Icons.open_in_new_rounded, color: Colors.black, size: 20),
              ),
            ),
          ],
        ),
      );
    }

    // 背景盲盒
    Widget buildBlindBox() {
      return Positioned(
        top: 0,
        left: 0,
        right: 0,
        // height: 360,
        height: 420,
        child: Column(
          children: [
            Container(
              margin: EdgeInsets.only(top: statusBarHeight + 18 + 28 + 24),
              width: double.infinity,
              height: 360 - (statusBarHeight + 18 + 28 + 24),
              decoration: BoxDecoration(
                color: Color(0xFF004DFF),
                backgroundBlendMode: BlendMode.lighten,
                image: DecorationImage(
                  image: AssetImage("assets/bg/block-bg.jpg"),
                  repeat: ImageRepeat.repeat,
                ),
                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(40), bottomRight: Radius.circular(40)),
              ),
              child: Container(
                height: 150,
                width: 150,
                child: Image.asset("assets/bg/blind-box.png"),
              ),
            ),
          ],
        ),
      );
    }

    // 简要信息
    Widget buildInfo() {
      return Positioned(
        top: statusBarHeight + 400,
        left: 0,
        right: 0,
        child: Container(
          margin: EdgeInsets.symmetric(horizontal: 20),
          padding: EdgeInsets.all(16),
          color: Colors.white,
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("VIRTUALLY", style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700, color: Color(0xFF141519), decoration: TextDecoration.none)),
                  Text("Public Sale", style: TextStyle(fontSize: 12, fontWeight: FontWeight.w300, color: Color(0xFF86909C), decoration: TextDecoration.none)),
                ],
              ),
              SizedBox(height: 6),
              Row(
                children: [
                  Container(
                    padding: EdgeInsets.symmetric(vertical: 2, horizontal: 5),
                    decoration: BoxDecoration(
                      color: Colors.black,
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(4),
                        bottomLeft: Radius.circular(4),
                      ),
                    ),
                    child: Text("Draw", style: TextStyle(fontSize: 13, fontWeight: FontWeight.w300, color: Colors.white, decoration: TextDecoration.none)),
                  ),
                  SizedBox(width: 1),
                  Container(
                    padding: EdgeInsets.symmetric(vertical: 2, horizontal: 5),
                    decoration: BoxDecoration(
                      color: Color(0xFF325EF6),
                      borderRadius: BorderRadius.only(
                        topRight: Radius.circular(4),
                        bottomRight: Radius.circular(4),
                      ),
                    ),
                    child: Text("99 copies", style: TextStyle(fontSize: 13, fontWeight: FontWeight.w300, color: Colors.white, decoration: TextDecoration.none)),
                  ),
                ],
              ),
            ],
          ),
        ),
      );
    }

    // 时间轴
    Widget buildTimeAxios() {
      return Positioned(
        top: 480,
        left: 0,
        right: 0,
        bottom: 0,
        child: Column(
          children: [
            Expanded(
              flex: 1,
              child: ListView(
                children: [
                  Container(
                    margin: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
                    padding: EdgeInsets.all(16),
                    color: Colors.white,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text("Subscription process", style: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.w700,
                          fontSize: 18,
                          decoration: TextDecoration.none,
                        )),
                        SizedBox(height: 16),
                        ...MockData.timeLine.map((row) => Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.center,
                              // margin: EdgeInsets.only(right: 22),
                              children: [
                                Container(
                                  width: 10,
                                  height: 10,
                                  margin: EdgeInsets.only(top: 3),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(5),
                                    border: Border.all(width: 2, color: row["active"] == "true" ? Color(0xFF0E6BFE) : Color(0xFF1D2129),),
                                  ),
                                ),
                                row != MockData.timeLine.last ? CustomPaint(
                                  size: Size(1, 37), // 可选：指定画布大小
                                  painter: VerticalDottedLine(
                                    width: 1.5,
                                    height: 37,
                                    dotSpacing: 5.0,
                                    dotSize: 1.5,
                                    color: row["active"] == "true" ? Color(0xFF0E6BFE) : Color(0xFF1D2129),
                                  ), // 使用自定义画家
                                ) : SizedBox(),
                              ],
                            ),
                            SizedBox(width: 12),
                            Text(row["title"]!, style: TextStyle(fontSize: 16, decoration:TextDecoration.none, fontWeight: FontWeight.w700, color: row["active"] == "true" ? Color(0xFF0E6BFE) : Color(0xFF1D2129))),
                            Expanded(
                              flex: 1,
                              child: SizedBox(),
                            ),
                            Text(row["time"]!, style: TextStyle(fontSize: 14, decoration:TextDecoration.none, fontWeight: FontWeight.w400, color: row["active"] == "true" ? Color(0xFF0E6BFE) : Color(0xFF1D2129)))
                          ],
                        )).toList(),
                      ],
                    ),
                  ),
                  // 再重复一边
                ],
              ),
            ),
          ],
        ),
      );
    }

    // 底部提交按钮
    Widget buildSubmit() {
      return Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: Container(
          height: 64,
          color: Colors.white,
          padding: EdgeInsets.only(left: 16, top: 16, right: 16, bottom: 0),
          child: ElevatedButton(
            onPressed: () {},
            style: ButtonStyle(
              // backgroundColor: WidgetStatePropertyAll()
              backgroundColor: WidgetStateProperty.all(Color(0xFF0085FF)),
              shape: WidgetStatePropertyAll(RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(0),
              )),
            ),
            child: Text("Subscription", style: TextStyle(
              color: Colors.white,
              fontSize: 17,
              fontWeight: FontWeight.w500,
            )),
          ),
        ),
      );
    }

    return Container(
      color: Color(0xFFF4F5FA),
      child: Stack(
        children: [
          // 盲盒
          buildBlindBox(),
          // 顶部按钮
          buildTopActions(),
          // 简要信息
          buildInfo(),
          // 时间轴
          buildTimeAxios(),
          // 底部提交按钮
          buildSubmit(),
        ],
      ),
    );
  }
}